<template>
	<div>
		<el-dialog
			title="数据配置"
			:visible.sync="selectEditVisible"
			:before-close="beforeClose"
			:close-on-click-modal="false"
			append-to-body
			width="50%"
		>
			<div style="margin-bottom: 10px; display: flex; align-items: center">
				<span style="margin-right: 5px">表头地址:</span>
				<el-input
					v-model="url"
					placeholder="请输入地址"
					style="width: 50%"
					size="small"
					clearable
				/>
				<el-button
					type="primary"
					size="small"
					style="margin-left: 5px"
					@click="handlerGetdata"
				>
					获取数据
				</el-button>
				<el-tooltip
					class="item"
					effect="dark"
					content="输入地址后以远程地址数据为主，以本地数据为主请获取数据后清除地址"
					placement="top-start"
				>
					<i class="el-icon-info" style="margin-left: 5px" />
				</el-tooltip>
			</div>
			<draggable
				:list="column"
				:animation="340"
				group="selectItem"
				handle=".option-drag"
			>
				<div v-for="(item, index) in column" :key="index" class="select-item">
					<div class="select-line-icon option-drag">
						<i class="el-icon-s-operation" />
					</div>
					<el-input v-model="item.label" placeholder="字段名" size="small" />
					<el-input v-model="item.value" placeholder="字段值" size="small" />
					<div
						class="close-btn select-line-icon"
						@click="column.splice(index, 1)"
					>
						<i class="el-icon-remove-outline" />
					</div>
				</div>
			</draggable>
			<div style="margin-left: 20px; margin-bottom: 20px">
				<el-button
					style="padding-bottom: 0"
					icon="el-icon-circle-plus-outline"
					type="text"
					@click="addSelectItem"
				>
					添加字段
				</el-button>
			</div>
			<!-- <span></span> -->
			<span slot="footer">
				<el-button @click="handlerCancel">取消</el-button>
				<el-button type="primary" @click="handlerSubmit">提交</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
	components: {
		draggable,
	},
	props: {
		selectEditVisible: Boolean,
		optionsData: {
			type: Array,
			default: () => [],
		},
		optionsUrl: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			column: [],
			CopyColumn: [],
			url: '',
		}
	},
	watch: {
		optionsData: {
			handler: function (val) {
				this.column = [...val]
				this.CopyColumn = [...val]
			},
			immediate: true,
			// deep: true
		},
		optionsUrl: {
			handler: function (val) {
				this.url = val
			},
			immediate: true,
		},
	},
	methods: {
		handlerGetdata() {
			if (this.url.includes('http://') || this.url.includes('https://')) {
				this.$axios
					.get(this.url)
					.then(({ data }) => {
						if (data.data) {
							// this.$emit('tableHeaderEdit', data.data)
							// this.$nextTick(() => {
							// 	this.handlerCancel()
							// })
							this.column = [...data.data]
						} else {
							this.column = [...data]
						}
					})
					.catch(() => {
						this.$message.error('获取数据失败')
					})
			} else {
				this.$message.error('请检查地址是否完整')
			}
		},
		handlerSubmit() {
			// if (this.url) {
			// 	if (this.url.includes('http://') || this.url.includes('https://')) {
			// 		this.$emit('tableHeaderEdit', [])
			// 	} else {
			// 		this.$message.error('请检查地址是否完整')
			// 	}
			// } else {
			this.$emit('selectEdit', this.column, this.url)
			this.$nextTick(() => {
				this.handlerCancel()
			})
			// }
		},
		handlerCancel() {
			this.column = [...this.CopyColumn]
			this.beforeClose()
		},
		beforeClose() {
			this.$emit('update:selectEditVisible', false)
		},
		addSelectItem() {
			this.column.push({
				value: '',
				label: '',
			})
		},
	},
}
</script>

<style lang="scss" scoped>
.select-item {
	display: flex;
	border: 1px dashed #fff;
	box-sizing: border-box;
	& .close-btn {
		cursor: pointer;
		color: #f56c6c;
	}
	& .el-input + .el-input {
		margin-left: 4px;
	}
}
.select-item + .select-item {
	margin-top: 4px;
}
.select-item.sortable-chosen {
	border: 1px dashed #409eff;
}
.select-line-icon {
	line-height: 32px;
	font-size: 22px;
	padding: 0 4px;
	color: #777;
	cursor: move;
}
</style>
